<script setup name="ConfirmPayment">
import patentService from "@/api/patentinfo/index.js";
import Message from 'vue-m-message'
import businessService from '@/api/business/index.js'
import customerInformationService from '@/api/customerInformation/index.js'
import gfRecordService from '@/api/gfRecord/index.js'
import BaseForm from '@/components/BaseForm/BaseForm.vue'
import DictTag from '@/components/DictTag/index.vue'
import Toolbar from '@/components/Toolbar/Toolbar.vue'
import { useDict } from '@/utils/dict.js'
import { tableCheckChane } from '@/utils/index.js'

const { proxy } = getCurrentInstance()
const { gf_confirm_status, discount_rate } = useDict('gf_confirm_status', 'discount_rate')
const pagerConfig = ref({
  total: 0,
  currentPage: 1,
  pageSize: 10,
})
const ids = ref([])
const tableData = ref([])
const customerList = ref({})
const businessList = ref([])
const tableColumn = reactive([
  {
    type: 'checkbox',
    width: 50,
    align: 'center',
  },
  { title: '客户名称', field: 'customerName', align: 'center' },
  { title: '合同编号', field: 'contractNo', align: 'center' },
  { title: '案件编号', field: 'reelNumber', align: 'center' },
  { title: '业务名称', field: 'patentName', align: 'center' },
  { title: '业务类型', field: 'businessName', align: 'center' },
  { title: '状态', field: 'isHand', align: 'center',
    slots: {
      default: ({ row }) => {
        return h(DictTag, {
          options: gf_confirm_status.value,
          value: row.isHand,
        })
      },
    },
  },
  {
    title: '操作',
    align: 'center',
    field: 'action',
    slots: {
      default: 'actions',
    },
  },
])
const searchConfig = reactive([
  {
    label: '合同编号',
    field: 'contractNo',
    type: 'input',
    defaultShow: true,
  },
  {
    label: '客户名称',
    field: 'customerName',
    type: 'select',
    options: {
      data: customerList,
      label: 'customerName',
      value: 'customerId',
    },
    defaultShow: true,

  },
  {
    label: '案件编号',
    field: 'reelNumber',
    type: 'input',
    defaultShow: true,

  },
  {
    label: '案件名称',
    field: 'patentName',
    type: 'input',
    defaultShow: true,

  },
  {
    label: '业务类型',
    field: 'patentType',
    type: 'select',
    options: {
      data: businessList,
      label: 'businessName',
      value: 'businessId',
    },
    defaultShow: true,

  },
])
const queryParam = ref({})
const confirmDialogVisible = ref(false)
const confirmFormList = ref([])
const confirmForm = ref({})
const patentIds = ref('')
onMounted(() => {
  getOptionsData()
  getList()
})

function getOptionsData() {
  customerInformationService.getQueryList().then((res) => {
    customerList.value = res.data
  })
  businessService.list().then((res) => {
    businessList.value = res.rows
  })
}
function getList() {
  const params = {
    ...queryParam.value,
    pageNum: pagerConfig.value.currentPage,
    pageSize: pagerConfig.value.pageSize,
    confirmStatus: 0,
  }
  patentService.selectReadyConfirmPage(params).then((res) => {
    tableData.value = res.rows
    pagerConfig.value.total = res.total
  })
}

function handlePageChange({ currentPage, pageSize }) {
  pagerConfig.value.currentPage = currentPage
  pagerConfig.value.pageSize = pageSize
  getList()
}

function handleCheckChange(data) {
  ids.value = tableCheckChane(data, 'patentId', ids.value)
}

function handleExport() {
  proxy.download('', { ...queryParam.value, exportIds: ids.value.join(',') }, `_${new Date().getTime()}.xlsx`)
}

function handleSearch(params) {
  queryParam.value = params
  pagerConfig.value.currentPage = 1
  getList()
}
function handleConfirm(row) {
  patentIds.value = row ? row.patentId : ids.value.join(',')
  const confirmFormListArr = [
    {
      label: '费减比例',
      field: 'discountRate',
      type: 'select',
      options: {
        data: discount_rate.value,
      },
      span: 24,
      rules: [
        { required: true, message: '请选择费减比例' },
      ],
    },
  ]
  if (row) {
    confirmFormListArr.push({
      label: '费减文件',
      field: 'discountFile',
      type: 'upload',
      limit: 1,
      span: 24,
    })
  }
  confirmFormList.value = confirmFormListArr
  confirmDialogVisible.value = true
}

function handleDialogCancel() {
  confirmForm.value = {}
  confirmDialogVisible.value = false
}

function handleConfirmSubmit() {
  const params = {
    ...confirmForm.value,
    patentIds: patentIds.value,
  }
  gfRecordService.confirm(params).then((res) => {
    const code = res.code
    if (code === 200) {
      Message.success('确认成功')
      confirmDialogVisible.value = false
      handleDialogCancel()
      getList()
    }
  })
}
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="">
      <SearchBar :search-config="searchConfig" @search="handleSearch" />
    </el-card>
    <el-card shadow="never" class="mt-2">
      <Toolbar>
        <el-button
          v-hasPermi="['system:gfRecord:edit']"
          type="success"
          class="el-gradient-success"
          @click="handleConfirm(null)"
        >
          批量确认
          <el-icon class="el-icon--right">
            <CircleCheckFilled />
          </el-icon>
        </el-button>
        <el-button
          v-hasPermi="['system:gfRecord:export']"
          type="warning"
          class="el-gradient-warning"
          @click="handleExport()"
        >
          导出
          <el-icon class="el-icon--right">
            <FolderAdd />
          </el-icon>
        </el-button>
      </Toolbar>
      <vxe-grid
        :row-config="{
          keyField: 'patentId',
        }"
        :data="tableData"
        :columns="tableColumn"
        :pager-config="pagerConfig"
        header-cell-class-name="headerCellClass"
        @page-change="handlePageChange"
        @checkbox-all="handleCheckChange"
        @checkbox-change="handleCheckChange"
        max-height="580px"
      >
        <template #actions="{ row }">
          <el-button
            v-hasPermi="['system:gfRecord:edit']"
            size="small"
            text
            type="success"
            @click="handleConfirm(row)"
          >
            确认
          </el-button>
        </template>
      </vxe-grid>
    </el-card>
    <el-dialog
      v-model="confirmDialogVisible"
      class="custom-dialog"
      :append-to-body="true"
      :destroy-on-close="true"
      width="30%"
    >
      <template #header>
        <div class="dialog-header">
          <span class="relative top-3 text-[16px]">
            确认收款
          </span>
        </div>
      </template>
      <BaseForm :field-list="confirmFormList" :model="confirmForm" @cancel="handleDialogCancel" @submit="handleConfirmSubmit" />
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>

</style>
